<script type="text/javascript">
     var socketId = 0;
     var username, userId, newUser, avatar = false, lastDate, messagesLoaded, usersLoaded;
     var socket = io('http://127.0.0.1:8360');
     //发送事件
      socket.on('connection', function(data){
         socketId = data.socketID;
         //var html = '<div class="message message-received"><div class="message-name">'+data.username+'</div><div class="message-text">'+data.msg+'</div><div class="message-avatar" style="background-image:url()></div></div>';
          //$(".messages").append(html);
      })
      
      $('.messagebar a.link').on('click', function () {
        var textarea = $('.messagebar textarea');
        var messageText = textarea.val();
        if (messageText.length === 0) return;

        textarea.val('').trigger('change');
        var date = new Date();
        var offset = date.getTimezoneOffset() * 60 * 1000;
        date = date.getTime() + offset;
        var day, time;

        if (!lastDate || (lastDate && date - lastDate > 1000 * 60 * 5)) {
            day = formatDay(date);
            time = formatTime(date);
            lastDate = date;
        }
        // Add Message
        //chattr.addMessage();
        socket.emit('chat', {
            text: stripMessage(messageText),
            type: 'sent',
            name: 'perry',
            avatar: 'http://lorempixel.com/output/people-q-c-100-100-9.jpg',
            day: day,
            time: time,
            socket_id:socketId
        });
      });
      //接受消息
      socket.on('chat', function(data){
            var data = data.data;
            var datestr = '<div class="messages-date">'+data.day+' , <span>'+data.time+'</span></div>';
            $(".messages").append(datestr);
            var html = '<div class="message message-received message-with-avatar message-last message-with-tail message-first"><div class="message-name" style="display:black;">'+data.name+'</div><div class="message-text">'+data.message+'</div><div class="message-avatar" style="background-image:url('+data.avatar+')"></div></div>';
            $(".messages").append(html)
        })
      /*我自己*/
      socket.on('sendok',function(data){
            var data = data.data;
            var html = '<div class="message message-sent message-with-avatar message-last message-with-tail"><div class="message-name" style="display:black;">'+data.name+'</div><div class="message-text">'+data.message+'</div><div class="message-avatar" style="background-image:url(http://lorempixel.com/300/300/)"></div></div>';
            $(".messages").append(html)
      })

      // Initial load
      function stripMessage(messageText) {
          messageText = $.emoticons.replace(messageText);
          if (!(messageText.indexOf('<img') === 0 && messageText.split('<').length === 2 || messageText.indexOf('<span class="emoticon') >= 0)) {
              messageText = messageText.replace(/>/g, '&gt;').replace(/</g, '&lt;');
          }
          messageText.replace(/script/g, 'scr\bipt');
          return messageText;
      }
      // Format date
      function formatDay(d) {
          var date = new Date(d);
          var weekDay = 'Sunday Monday Tuesday Wednesday Thursday Friday Saturday'.split(' ')[date.getDay()];
          var day = date.getDate();
          var month = 'Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec'.split(' ')[date.getMonth()];
          return weekDay + ', ' + month + ' ' + day;
      }
      function formatTime(d) {
          var date = new Date(d);
          var hours = date.getHours();
          if (hours < 10) hours = '0' + hours;
          var mins = date.getMinutes();
          if (mins < 10) mins = '0' + mins;
          return hours + ':' + mins;
      }
      function formatDate(d) {
          return formatDay(d) + ', <span>' + formatTime(d) + '</span>';
      }
  </script>